<template>
  <view>
    <view class="header">
      <image class="shop__avatar" :src="shopData.pic"></image>
      <view class="header__info">
        <text class="shop__name">{{shopData.name}}</text>
        <text class="shop__balance">套餐余额:{{balance}}次</text>
      </view>
    </view>
    <u-gap height="20" bg-color="#F8F9F9"></u-gap>
    <text class="title">请选择套餐</text>
    <!--    套餐选择-->
    <scroll-view scroll-x="true" class="combo">
      <view :class="['comboList',list.id == checkComboId?'comboList__hover':'']" v-for="list in comboList"
            :key="list.id" @click="checkCombo(list.id,list.remark,list.price)">
        <view class="comboList__main">
          <text class="combo__name">{{list.name}}</text>
          <view class="combo__price">
            <view class="combo__price-now" v-if="shopData.isProxy == 0">
              <text>¥</text>
              {{list.price}}
            </view>
            <view class="combo__price-now" v-if="shopData.isProxy == 1">
              <text>¥</text>
              {{list.proxyPrice}}
            </view>
            <view class="combo__price-old">
              <text>¥</text>
              {{list.marketPrice}}
            </view>
          </view>
          <view class="combo__count" v-if="list.voideGive">{{list.voideCount - list.voideGive}}次赠送{{list.voideGive}}次
          </view>
          <view class="combo__count" v-else>{{list.voideCount}}次</view>
          <view class="combo__tabs" v-if="shopData.isProxy == 0">折扣{{list.marketPrice - list.price}}元</view>
          <view class="combo__tabs" v-if="shopData.isProxy == 1">折扣{{list.marketPrice - list.proxyPrice}}元</view>
        </view>
      </view>
    </scroll-view>
    <text class="title">套餐描述</text>
    <view class="combo__info">
      <view class="combo__info-item" v-for="(combo,index) in comboInfo" :key="index">{{combo}}</view>
    </view>
    <view class="box"></view>
    <view class="flex-bottom">
      <view class="buy__btn" @tap="$u.throttle(pay, 1000)">
        立即以{{comboPrice}}元购买
      </view>
    </view>
    <w-loading text="加载中" mask="true" click="true" ref="loading"></w-loading>
  </view>
</template>
<script>
import {shopInfo, videoCount, goodsList, orderCreate, payOrder, orderPay} from "../../api/shop";

export default {
  data() {
    return {
      //商户数据
      shopData: {},
      //套餐余额
      balance: "",
      //套餐列表
      comboList: [],
      //选中套餐id
      checkComboId: 0,
      //套餐描述
      comboInfo: [],
      //价格
      comboPrice: ''
    }
  },
  onLoad() {
    this.getShopInfo();
    this.getBalance();
    this.getCombo();
  },
  methods: {
    //获取余额
    getBalance() {
      videoCount().then(res => {
        this.balance = res.data
      })
    },
    //获取商户信息
    getShopInfo() {
      this.shopData = uni.getStorageSync('userInfo');
    },
    //获取套餐列表
    getCombo() {
      this.$refs.loading.open()
      goodsList().then(res => {
        this.$refs.loading.close()

        this.comboList = res.data;
        this.comboList.forEach(item => {
          item.price = parseInt(item.price);
          item.marketPrice = parseInt(item.marketPrice);
        })
        this.checkComboId = this.comboList[0].id;
        if (this.shopData.isProxy == 0) {
          this.comboPrice = this.comboList[0].price;
        }else {
          this.comboPrice = this.comboList[0].proxyPrice;
        }
        this.comboInfo = this.strToArray(this.comboList[0].remark);

      }).catch(err => {
        this.$refs.loading.close()
      })

    },
    //选中套餐操作
    checkCombo(id, remark, price) {
      this.checkComboId = id;
      if (remark) {
        this.comboInfo = this.strToArray(remark);
      } else {
        this.comboInfo = ""
      }
      this.comboPrice = Math.ceil(price)
    },

    //付款
    pay() {
      const _this = this;
      orderCreate({
        goodsId: this.checkComboId,
        count: 1
      }).then(res => {
        orderPay({
          orderNum: res.data.orderNum
        }).then(pay => {
          let parameter = pay.data
          wx.requestPayment({
            timeStamp: parameter.timeStamp,
            nonceStr: parameter.nonceStr,
            package: parameter.packageValue,
            signType: parameter.signType,
            paySign: parameter.paySign,
            success(res) {
              _this.getBalance();
              uni.showToast({
                title: '支付成功',
                icon: "success",
                duration: 2000
              });
            },
            fail(res) {
              console.log(res);
            }
          })
        })
      })
    },
    //字符串转数组
    strToArray(str) {
      if (str) {
        let arr = str.split('。');
        return arr
      } else {
        return ""
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 90%;
  height: 160rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;

  .shop__avatar {
    display: block;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    box-shadow: 0px 2px 4px 2px rgba(238, 238, 238, 0.5);
  }

  .header__info {
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin-left: 20rpx;

    .shop__name {
      font-size: 28rpx;
      font-weight: bold;
      color: #2E3C4D;
    }

    .shop__balance {
      font-size: 24rpx;
      color: #AEB3C0;
      margin-top: 15rpx;

    }
  }
}

.title {
  display: block;
  width: 90%;
  margin: 40rpx auto;
  text-align: left;

}

.combo {
  width: 95%;
  height: 270rpx;
  margin-left: 5%;
  white-space: nowrap;

  .comboList__hover {
    background: rgba(65, 116, 232, 0.05);
    border: 2px solid #4174E8 !important;
  }

  .comboList {
    display: inline-block;
    width: 300rpx;
    height: 240rpx;
    border-radius: 10px;
    border: 2px solid #eaeaea;
    margin-right: 40rpx;
    position: relative;
    margin-top: 15rpx;

    .comboList__main {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      width: 300rpx;
      height: 170rpx;
      margin-top: 30rpx;

      .combo__name {
        font-size: 24rpx;
        color: #2E3C4D;
      }

      .combo__price {
        display: flex;
        align-items: center;

        .combo__price-now {
          font-size: 45rpx;
          color: #4174E8;

          > text {
            font-size: 30rpx;
          }
        }

        .combo__price-old {
          color: #AEB3C0;
          margin-top: 10rpx;
          margin-left: 10rpx;
          text-decoration: line-through;

          > text {
            font-size: 20rpx;
          }
        }
      }

      .combo__count {
        color: #AEB3C0;
        font-size: 24rpx;
      }

    }

    .combo__tabs {
      background: #4174E8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);
      border-radius: 3px;
      font-size: 20rpx;
      color: #ffffff;
      padding: 6rpx 10rpx;
      position: absolute;
      top: -20rpx;
      right: 0;

    }
  }
}

.combo__info {
  width: 90%;
  min-height: 400rpx;
  margin: 0 auto;
  background: rgba(216, 216, 216, 0.3);
  padding: 20rpx;
  border-radius: 10rpx;

  .combo__info-item {
    color: #7A8899;
  }
}

.box {
  width: 100%;
  height: 300rpx;
}

.flex-bottom {
  width: 100%;
  height: 250rpx;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0rpx;
  background: #ffffff;

}

.buy__btn {
  width: 60%;
  height: 80rpx;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
  background: #D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);
  border-radius: 7rpx;
  letter-spacing: 5rpx;

}
</style>
